<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <!-- <view class="navbar">
      <text class="navbar-title">我的</text>
    </view> -->
    
    <!-- 个人信息区域 -->
    <view class="user-info">
			<image class="user-avatar" src="/static/user1.png"></image>
      <text class="user-name">{{ username }}</text>
      <!-- <text class="user-id">{{ username }}</text> -->
    </view>
    
    <!-- 功能列表 -->
   <view class="function-list">
     <!--  <view class="function-item" @click="navigateToProgress(0)">
        <uni-icons custom-prefix="iconfont" type="icon-daohang" size="26"></uni-icons>
        <text class="item-text">我的订单</text>
        <uni-icons type="right"></uni-icons>
      </view>
	  
	  <view class="function-item" @click="navigateToProgress(1)">
	    <uni-icons custom-prefix="iconfont" type="icon-qitadingdan" size="26"></uni-icons>
	    <text class="item-text">我的待办</text>
	    <uni-icons type="right"></uni-icons>
	  </view>
	  
	  <view class="function-item" @click="navigateToProgress(2)">
	    <uni-icons custom-prefix="iconfont" type="icon-yijianfankui" size="26"></uni-icons>
	    <text class="item-text">我的审批</text>
	    <uni-icons type="right"></uni-icons>
	  </view> -->
      
		<view class="function-item" @click="logout">
			<uni-icons custom-prefix="iconfont" type="icon-tuichu" size="26"></uni-icons>
			<text class="item-text">退出登录</text>
			<uni-icons type="right"></uni-icons>
		</view>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 1,
			username: '',
    }
  },
	onShow() {
		// 获取用户信息
		let userInfo = uni.getStorageSync('userInfo');
		this.username = userInfo.username
	},
  methods: {
    // 导航到工单进度页面
    navigateToProgress(type) {
			switch (type) {
				case 0:
					uni.navigateTo({
					  url: '/pages/workorder/orderList'
					})
					break;
				case 1:
					uni.navigateTo({
						url: '/pages/workorder/myBacklog'
					})
					break;
				case 2:
					uni.navigateTo({
						url: '/pages/workorder/myApply'
					});
					break;
			}
    },
    
    // 切换底部导航
    switchTab(index) {
      if (index === 0) {
        // 首页
        uni.switchTab({
          url: '/pages/index/index'
        })
      } else if (index === 1) {
        // 我的
        uni.switchTab({
          url: '/pages/mine/mine'
        })
      }
      this.currentTab = index
    },
		logout() {
			uni.removeStorage();
			uni.removeStorageSync();
			uni.clearStorageSync();
			uni.clearStorage();
			
			uni.navigateTo({
			  url: '/pages/login/login'
			})
		}
  }
}
</script>

<style>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f8f8f8;
}

/* 导航栏样式 */
.navbar {
  height: 100rpx;
  background-color: #007AFF;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36rpx;
  font-weight: bold;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.navbar-title {
  letter-spacing: 2rpx;
}

/* 用户信息区域 */
.user-info {
  background-color: #007AFF;
  height: 300rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.user-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-bottom: 20rpx;
  border: 2rpx solid rgba(255, 255, 255, 0.1);
}

.user-name {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.user-id {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
}

/* 功能列表 */
.function-list {
  margin-top: 30rpx;
  background-color: #fff;
}

.function-item {
  height: 100rpx;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #eee;
}

.item-icon {
  width: 48rpx;
  height: 48rpx;
  margin-right: 20rpx;
}

.item-text {
  flex: 1;
  font-size: 28rpx;
  color: #333;
	margin-left: 10rpx;
}

.item-arrow {
  width: 20rpx;
  height: 36rpx;
  color: #999;
}

/* 底部导航样式 */
.tabbar {
  height: 100rpx;
  border-top: 1rpx solid #eee;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 100%;
}

.tabbar-item.active .tabbar-text {
  color: #007AFF;
}

.tabbar-icon {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 8rpx;
}

.tabbar-text {
  font-size: 24rpx;
  color: #999;
}
</style>    